<template>
  <div class="dept-manage">
    <!-- 查询区域 -->
    <div class="query-form">
      <el-form :inline="true" :model="queryForm" ref="refQueryForm">
        <el-form-item label="部门名称:" prop="deptName">
          <el-input v-model="queryForm.deptName" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDeptList" v-auth="'dept-query'">查询</el-button>
          <el-button @click="restForm('refQueryForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="base-table">
      <!-- 表格头部操作区 -->
      <div class="action" v-auth="'dept-add'">
        <el-button type="primary" @click="openDeptModel">新增部门</el-button>
      </div>
      <!-- 部门列表 -->
      <el-table :data="deptList" row-key="_id" :tree-props="{ children: 'children' }" stripe default-expand-all>
        <el-table-column v-for="colum in colums" :key="colum.prop" v-bind="colum"> </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button size="mini" type="primary" @click="editDept(scope.row)" v-auth="'dept-edit'">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteDept(scope.row)" v-auth="'dept-delete'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增部门弹窗 -->
    <el-dialog :title="action === 'add' ? '新增部门' : '编辑部门'" v-model="showModal" @close="closeModal">
      <el-form ref="refDeptForm" :model="deptForm" :rules="rules" label-width="120px">
        <el-form-item label="上级部门" prop="parentId">
          <el-cascader
            placeholder="请选择上级部门"
            v-model="deptForm.parentId"
            :props="{ checkStrictly: true, value: '_id', label: 'deptName' }"
            clearable
            :options="deptList"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName">
          <el-input placeholder="请输入部门名称" v-model="deptForm.deptName"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="userName">
          <el-select placeholder="请选择部门负责人" v-model="deptForm.userName" @change="deptChangeUser">
            <el-option
              v-for="user in userList"
              :key="user.userId"
              :label="user.userName"
              :value="`${user.userId}/${user.userName}/${user.userEmail}`"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人邮箱" prop="deptName">
          <el-input placeholder="请选择负责人" v-model="deptForm.userEmail" disabled></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="closeModal">取 消</el-button>
          <el-button type="primary" @click="deptModelSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import utils from '@/utils/utils.js';
export default {
  name: 'Dept',
  data() {
    return {
      // 部门查询表单
      queryForm: {},
      action: 'add',
      showModal: false,
      colums: [
        { label: '部门名称', prop: 'deptName' },
        { label: '负责人', prop: 'userName' },
        {
          label: '更新时间',
          prop: 'updateTime',
          formatter(row, column, value) {
            return utils.formateDate(new Date(value));
          },
        },
        {
          label: '创建时间',
          prop: 'createTime',
          formatter(row, column, value) {
            return utils.formateDate(new Date(value));
          },
        },
      ],
      deptList: [],
      userList: [],
      deptForm: { parentId: [null] },
      rules: {
        parentId: [{ required: true, message: '请选择上级部门' }],
        deptName: [{ required: true, message: '请输入部门名称' }],
        userName: [{ required: true, message: '请选择负责人' }],
      },
    };
  },
  mounted() {
    this.getDeptList();
    this.getAllUserList();
  },
  methods: {
    async getDeptList() {
      this.deptList = await this.$api.getDeptList(this.queryForm);
    },
    async getAllUserList() {
      this.userList = await this.$api.getAllUserList();
    },
    // 重置表单
    restForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 编辑部门
    editDept(row) {
      this.action = 'edit';
      this.showModal = true;
      this.$nextTick(() => {
        Object.assign(this.deptForm, row, { user: `${row.userId}/${row.userName}/${row.userEmail}` });
      });
    },
    // 删除部门
    async deleteDept({ _id }) {
      this.action = 'delete';
      await this.$api.deptOperate({ _id, action: this.action });
      this.$message.success('删除成功');
      this.getDeptList();
    },
    // 添加按钮点击事件
    openDeptModel() {
      this.action = 'add';
      this.showModal = true;
    },
    closeModal() {
      this.showModal = false;
      this.restForm('refDeptForm');
    },
    async deptModelSubmit() {
      this.$refs.refDeptForm.validate(async (valid) => {
        if (valid) {
          let params = { ...this.deptForm, action: this.action };
          delete params.user;
          await this.$api.deptOperate(params);
          this.closeModal();
          this.$message.success('操作成功');
          this.getDeptList();
        }
      });
    },
    deptChangeUser(val) {
      const [userId, userName, userEmail] = val.split('/');
      Object.assign(this.deptForm, { userId, userName, userEmail });
    },
  },
};
</script>
